<template>
    <view v-if="user" class="cu-dialog flex-col">
        <view class="bg-white row-all-center text-lg pt-sm text-bold">编辑个人信息</view>
        <view class="pt-0 bg-white solid-bottom flex-auto overflow-auto">
            <view>
                <view class="cu-form-group">
                    <view class="title">
                        昵称
                    </view>
                    <input :cursor-spacing="20" placeholder="昵称" maxlength="6" v-model.trim="nickname"/>
                    <view class="uni-icon uni-icon-clear" v-if="nickname" @click="clearNickname"></view>
                </view>

                <view class="cu-form-group">
                    <view class="title">性别</view>
                    <view>
                        <radio-group @change="genderChange">
                            <label class="mr-sm">
                                <radio class='blue cuIcon-male' :class="gender=='男'?'checked':''"
                                       :checked="gender=='男'?true:false" value="男"></radio>
                                <text class="ml-5px">男</text>
                            </label>

                            <label>
                                <radio class='pink cuIcon-female' :class="gender=='女'?'checked':''"
                                       :checked="gender=='女'?true:false" value="女"></radio>
                                <text class="ml-5px">女</text>
                            </label>
                        </radio-group>
                    </view>
                </view>

                <view class="cu-form-group">
                    <view class="title">出生日期</view>
                    <picker mode="date" :value="birthday" start="1900-01-01" :end="endDate" @change="dateChange">
                        <view class="picker">
                            {{birthday}}
                        </view>
                    </picker>
                </view>

                <view class="cu-form-group">
                    <view class="title">
                        所在地
                    </view>
                    <input :cursor-spacing="20" v-model="location" maxlength="10" placeholder="所在地"/>
                    <view class="uni-icon uni-icon-clear" v-if="location" @click="clearLocation"></view>
                </view>

                <view class="cu-form-group">
                    <view class="title">
                        <q-icon class="text-green mr-xs" size="40" icon="mdi-wechat"></q-icon>
                        微信
                    </view>
                    <input :cursor-spacing="20" v-model="wxAccount" maxlength="20" placeholder="微信号"/>
                    <view class="uni-icon uni-icon-clear" v-if="wxAccount" @click="clearWxAccount"></view>
                </view>

                <!-- #ifdef MP-WEIXIN -->
                <view class="cu-form-group">
                    <view class="title">
                        <q-icon class="text-blue mr-xs" size="36" icon="mdi-qqchat"></q-icon>
                        QQ
                    </view>
                    <input :cursor-spacing="20" v-model="qqAccount" maxlength="20" placeholder="QQ号"/>
                    <view class="uni-icon uni-icon-clear" v-if="qqAccount" @click="clearQqAccount"></view>
                </view>
                <!-- #endif -->

                <view class="cu-form-group">
                    <view class="title">
                        <q-icon class="text-orange mr-xs" size="40" icon="mdi-sina-weibo"></q-icon>
                        微博
                    </view>
                    <input :cursor-spacing="20" v-model="wbAccount" maxlength="20" placeholder="微博名称"/>
                    <view class="uni-icon uni-icon-clear" v-if="wbAccount" @click="clearWbAccount"></view>
                </view>

                <!--<view class="cu-form-group margin-top">
                    <view class="title">
                        个人介绍
                    </view>
                    <input placeholder="两字短标题" name="input"></input>
                    &lt;!&ndash;                展开下拉，可以显示 兴趣爱好职业收入等等，可自定义&ndash;&gt;
                </view>

                <view class="cu-form-group margin-top">
                    <view class="title">
                        理想型
                        &lt;!&ndash;                    同个人介绍相似&ndash;&gt;
                    </view>
                    <input placeholder="两字短标题" name="input"></input>
                </view>

                <view class="cu-form-group margin-top">
                    <view class="title">
                        微信
                        <q-icon icon="mdi-wechat"></q-icon>
                    </view>
                    <input placeholder="两字短标题" name="input"></input>
                </view>
                <view class="cu-form-group">
                    <view class="title">
                        QQ
                        <q-icon icon="mdi-qqchat"></q-icon>
                    </view>
                    <input placeholder="三字标题" name="input"></input>
                </view>

                <view class="cu-form-group">
                    <view class="title">
                        微博
                        <q-icon icon="mdi-sina-weibo"></q-icon>
                    </view>
                    <input placeholder="三字标题" name="input"></input>
                </view>
                -->
            </view>
        </view>
        <view class="cu-bar btn-group bg-white flex-none pt-5px pb-sm">
            <button class="cu-btn bd-gray radius bg-white" @click="closeUserEditPop">取消</button>
            <button class="cu-btn bg-green radius" @click="saveUser" :disabled="btnDisabled">保存</button>
        </view>
    </view>
</template>

<script lang="ts">
import { Vue, Component, Watch, Emit } from 'vue-property-decorator'
import UserVO from '@/model/user/UserVO'
import UserAPI from '@/api/UserAPI'
import { namespace } from 'vuex-class'
import UniUtils from '@/utils/UniUtils'
import UserStore from '@/plugins/store/UserStore'
import { parseDate } from '@/utils'

const userStore = namespace('user')

  @Component
export default class UserEdit extends Vue {
    @userStore.State('user') user: UserVO
    nickname = ''
    gender = '女'
    birthday = '1999-01-01'
    location = ''
    wxAccount = ''
    qqAccount = ''
    wbAccount = ''
    endDate = ''
    btnDisabled = false

    created () {
      this.endDate = parseDate(new Date())
      this.initData()
    }

    initData () {
      if (this.user) {
        this.nickname = this.user.nickname || ''
        this.gender = this.user.gender || '女'
        this.birthday = this.user.birthday || '1999-01-01'
        this.location = this.user.location || ''
        this.wxAccount = this.user.wxAccount || ''
        this.qqAccount = this.user.qqAccount || ''
        this.wbAccount = this.user.wbAccount || ''
        this.btnDisabled = false
      }
    }

    @Watch('user')
    watchUserChange () {
      this.initData()
    }

    @Emit('close')
    closeUserEditPop () {
      return ''
    }

    clearNickname () {
      this.nickname = ''
    }

    clearLocation () {
      this.location = ''
    }

    clearWxAccount () {
      this.wxAccount = ''
    }

    clearQqAccount () {
      this.qqAccount = ''
    }

    clearWbAccount () {
      this.wbAccount = ''
    }

    saveUser () {
      this.btnDisabled = true
      this.closeUserEditPop()
      UniUtils.action('是否确定修改个人信息').then(() => {
        this.user.nickname = this.nickname
        this.user.gender = this.gender
        this.user.birthday = this.birthday
        this.user.location = this.location
        this.user.wxAccount = this.wxAccount
        this.user.qqAccount = this.qqAccount
        this.user.wbAccount = this.wbAccount
        UniUtils.toast('已修改')
        UserAPI.editUserAPI(this.user).then((res: any) => {
          UserStore.setMineUser(res.data)
        }).finally(() => {
          this.btnDisabled = false
        })
      }).catch(() => {
        this.btnDisabled = false
      })
    }

    dateChange ({ target }) {
      this.birthday = target.value
    }

    genderChange ({ target }) {
      this.gender = target.value
    }
}
</script>
